<style>
    .flow-cnt{
        padding-left: 10px;
        padding-right: 10px;
    }
    .flow-cnt label{
        font-weight: normal;
        font-size: 12px;
        margin-right: 10px;
    }
    .flow-cnt h5{
        font-weight: bold;
    }
    .flow-group{
        display: flex;
        align-items: center;
    }
    .f_field_explain_title_green {
        color: green;
        margin: 0px;
        padding: 0px;
        font-size: 12px;
    }
    .distext{
        color: #eee;
    }
</style>
<template>
    <div class="flow-cnt">
        <h5>主办人相关选项</h5>
        <div class="flow-group" :class="{distext: data.allowDynamic == 1}">
            <label >
                <input type="radio" v-model="data.sponsor" value="confirm" name="sponsor">
                明确指定主办人
            </label>
            <label >
                <input type="radio" v-model="data.sponsor" value="none" name="sponsor">
                无主办人会签
            </label>
            <label>
                <input type="radio" v-model="data.sponsor" value="recipient" name="sponsor">
                先接收者为主办人
            </label>
        </div>

        <h5>是否允许会签</h5>
        <div class="flow-group">
            <label>
                <input type="radio" v-model="data.countersign" value="allow" name="countersign">
                允许会签
            </label>
            <label>
                <input type="radio" v-model="data.countersign" value="disallow" name="countersign">
                禁止会签
            </label>
            <label>
                <input type="radio" v-model="data.countersign" value="force" name="countersign">
                强制会签
            </label>
        </div>

        <h5>是否允许并发</h5>
        <div class="flow-group">
            <label>
                <input type="radio" v-model="data.concurrent" value="allow" name="concurrent">
                允许并发
            </label>
<!--            <label>-->
<!--                <input type="radio" v-model="data.concurrent" value="allowDynamic" name="concurrent">-->
<!--                允许动态并发-->
<!--            </label>-->
            <label>
                <input type="radio" v-model="data.concurrent" value="disallow" name="concurrent">
                禁止并发
            </label>
            <label>
                <input type="radio" v-model="data.concurrent" value="force" name="concurrent">
                强制并发
            </label>
        </div>

        <h5>动态并发</h5>
        <div class="flow-group">
            <label>
                <input type="radio" v-model="data.allowDynamic" value="1" name="allowDynamic">
                允许动态并发
            </label>
            <label>
                <input type="radio" v-model="data.allowDynamic" value="0" name="allowDynamic">
                禁止动态并发
            </label>
        </div>
        <div>
            <span class="f_field_explain_title_green">该节点无法选择主办人，将为每个经办人单独创建一个节点，该经办人成为该节点的主办人</span>
            <span class="f_field_explain_title_green">允许动态并发的时候，主办人的设置将会无效</span>
        </div>

        <h5>并发合并选项</h5>
        <div class="flow-group">
            <label>
                <input type="radio" v-model="data.merge" value="unforced" name="merge">
                非强制合并
            </label>
            <label>
                <input type="radio" v-model="data.merge" value="force" name="merge">
                强制合并
            </label>
        </div>
        <div>
            <span class="f_field_explain_title_green">非强制合并：此步骤主办人在并发分支中任意分支转至后即可进行转交</span>
        </div>
        <div>
            <span class="f_field_explain_title_green">强制合并：所有可能转至此步骤的分支步骤必须全部办理完毕，此步骤才可以转交</span>
        </div>

        <!--<h5>强制合并设置</h5>
        <div class="flow-group">
            <label>
                <input type="radio" v-model="data.mergeSet" value="unforced" name="mergeSet">
                合并提醒
            </label>
            <label>
                <input type="radio" v-model="data.mergeSet" value="force" name="mergeSet">
                逐次提醒
            </label>
        </div>-->

        <h5>是否允许更改经办人</h5>
        <div class="flow-group">
            <label>
                <input type="radio" v-model="data.changeAgent" value="allow" name="changeAgent">
                是
            </label>
            <label>
                <input type="radio" v-model="data.changeAgent" value="disallow" name="changeAgent">
                否
            </label>
        </div>

        <h5>会签意见可见性</h5>
        <div class="flow-group">
            <label>
                <input type="radio" v-model="data.canSeeSign" value="always" name="canSeeSign">
                总是可见
            </label>
            <label>
                <input type="radio" v-model="data.canSeeSign" value="hideOnCurrentStep" name="canSeeSign">
                本步骤经办人之间不可见
            </label>
        </div>

        <h5>
            默认提醒模板
        </h5>
        <div class="flow-group">
            <div class="" style="width: 60%">
                <textarea type="text" class="form-control input-sm" v-model="data.msgTemp" ></textarea>
                <div style="color: red; font-size: 12px; padding-top: 8px;">
                    说明：模板使用格式为[变量], 其中变量可以为“流水号”、“流程名”，以及表单的字段名
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    var component = {
        props: ["data"],
        data(){
            return {}
        },
        created(){
            // console.log(this.data)
            // for(var i in this.data){
            //     Vue.set(this.flow, i, this.data[i]);
            // }
            // console.warn(this.data);
            //
            // if(!this.data){
            //     Vue.set(this.data, {});
            // }
            this.data = this.data || {};
            if(!this.data.sponsor){
                this.data.sponsor = "confirm";
            }
            if(!this.data.countersign){
                this.data.countersign = "disallow";
            }
            if(!this.data.concurrent){
                this.data.concurrent = "disallow";
            }
            if(!this.data.merge){
                this.data.merge = "unforced";
            }
            if(!this.data.changeAgent){
                this.data.changeAgent = "allow";
            }
            if(!this.data.canSeeSign){
                this.data.canSeeSign = "always";
            }
            if(!this.data.msgTemp){
                this.data.msgTemp = "您有新的工作需要办理，流程id：[流水号]，流程：[流程名]";
            }

            Vue.set(this.data, "allowDynamic", this.data.allowDynamic || 0);
        }
    }
</script>